/* 引入免费草书字体（通过 Google Fonts）- 替换原行书字体 */
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');


/* 页面整体 - 改为柔和黄绿色背景 */
body {
    background-image: url('https://img0.baidu.com/it/u=2616782526,2638488175&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'); /* 示例纹理图，建议替换为国风类图片 */
    background-size: cover; /* 背景图自适应屏幕 */
    background-position: center; /* 背景图居中 */
    background-attachment: fixed; /* 滚动时背景固定 */
    background-repeat: no-repeat; /* 背景图不重复 */
    margin: auto;
    max-width: 580px;
    font-size: 14px;
    /* 行书字体序列，保持手写风格 */
    font-family: 'Ma Shan Zheng', 'FangZheng XingShu', 'STKaiti', 'KaiTi', serif;
    padding: 20px 0;
    /* 柔和黄绿色背景（低饱和度，不刺眼） */
    background-color: #f7f9e8;
    min-height: 100vh; /* 占满屏幕高度，避免背景断层 */
}

/* 内容容器 - 白色背景，突出主体 */
.container {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    padding: 25px;
    margin: 0 15px; /* 小屏幕左右留边距 */
}

/* 页脚 */
footer {
    color: #666; /* 加深文字，提升与黄绿色背景的对比度 */
    margin-top: 25px;
    text-align: center;
    padding: 10px;
    font-size: 13px; /* 行书字体稍小更精致 */
}

/* 头像 - 调整边框颜色，呼应黄绿色背景 */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e6e9d0; /* 黄绿色系边框，协调整体 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

/* 电影列表 */
.movie-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    overflow: hidden;
}

.movie-list li {
    padding: 15px 25px;
    border-bottom: 1px solid #134947; /* 淡红色边框，呼应文字 */
    font-size: 1.2rem;
    color: #b71c1c; /* 中深红色，避免过亮 */
    transition: background-color 0.3s ease;
}

.movie-list li:last-child {
    border-bottom: none;
}

/* 列表 hover 背景 - 黄绿色系，呼应整体 */
.movie-list li:hover {
    background-color: #f9fbe7;
}

/*!* 龙猫图片 - 调整背景色，适配黄绿色主题 *!*/
/*.totoro {*/
/*  display: block;*/
/*  margin: 20px auto;*/
/*  height: 100px;*/
/*  width: auto;*/
/*  border-radius: 12px;*/
/*  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
/*  padding: 8px;*/
/*  background-color: #fafbf5; !* 浅黄绿色背景，模拟相框 *!*/
/*  transition: all 0.3s ease;*/
/*  object-fit: contain;*/
/*}*/

/*!* 龙猫图片 hover 效果 - 加深黄绿色调 *!*/
/*.totoro:hover {*/
/*  transform: translateY(-5px) scale(1.05);*/
/*  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);*/
/*  background-color: #f5f7e0;*/
/*}*/
/* 图片加载过渡 */
.totoro {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 标题样式 - 调整颜色，适配黄绿色主题 */
h2 {
    color: #b49423; /* 深黄绿色文字，提升对比度 + 协调背景 */
    text-align: center;
    margin-bottom: 15px;
    font-size: 2.2rem; /* 行书标题放大，突出韵味 */
    font-weight: normal; /* 行书无需加粗，保持自然感 */
    letter-spacing: 2px; /* 增加字间距，更舒展 */
}

/* 电影数量统计文字 - 黄绿色系 */
.count {
    color: #8a9a5b; /* 中黄绿色文字，呼应主题 */
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* 电影标题和年份 - 行书细节优化 */
.movie-title {
    font-size: 1.3rem; /* 电影标题放大，突出重点 */
    margin-bottom: 4px;
    color: #5a6937; /* 深黄绿色，提升可读性 */
}

.movie-year {
    color: #777;
    font-size: 1rem;
}

/* 空列表提示文字 */
.movie-item:has(.fa-info-circle) {
    font-size: 1.1rem;
    padding: 20px 0;
}

/* 图标颜色调整 - 适配黄绿色主题 */
.fa-film, .fa-bookmark, .fa-info-circle {
    color: #8a9a5b !important; /* 黄绿色图标，统一风格 */
}

footer a {
    color: #6b7d3f !important; /* 页脚链接颜色，呼应标题 */
}
